<template>
  <section id="section-about-us" class="d-flex flex-column align-items-center">
    <SectionTitle title="关于我们" sub-title="About Us" />
    <b-img
      src="/images/logo.png"
      alt="Logo"
      width="300"
      height="105"
      class="logo"
    />
    <p>
      天津邦美佳科技有限公司是一家全新会员式社交电商互联网服务企业。旗下舍友魁牛购物商城APP、并配有数千平米的物流仓储。旨在为用户提供更优质、更便捷、更实惠的消费服务，及更美好的消费体验。
    </p>
    <div class="about-us-download">
      <div class="about-us-download-btn-group">
        <b-button variant="outline-secondary" pill>APP下载</b-button>
        <b-button variant="outline-secondary" pill>官方公众号</b-button>
      </div>
      <div class="about-us-download-qrcode">
        <b-img src="/images/mp-qrcode.jpg" width="112" height="112" />
        <p>扫码下载魁牛APP</p>
      </div>
    </div>
  </section>
</template>

<script>
import SectionTitle from '@/components/m/SectionTitle';

export default {
  components: {
    SectionTitle,
  },
};
</script>

<style lang="scss" scoped>
#section-about-us {
  background-color: #f3f3f3;
  padding: 30px 30px 20px;
  img.logo {
    margin-top: 30px;
    margin-bottom: 30px;
  }
  p {
    max-width: 318px;
    font-size: 13px;
    letter-spacing: 0.27px;
    text-align: center;
  }
  .about-us-download {
    display: flex;
    justify-content: center;
    align-items: stretch;
    margin-top: 34px;
  }
  .about-us-download-btn-group {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    button {
      width: 160px;
      height: 50px;
      font-size: 14px;
      color: #000000;
      line-height: 20px;
      letter-spacing: 0.44px;
      background-color: #fff;
    }
    margin-right: 40px;
  }
  .about-us-download-qrcode {
    display: flex;
    flex-direction: column;
    p {
      font-size: 12px;
      line-height: 17px;
      letter-spacing: 1px;
      margin-top: 1px;
      margin-bottom: 0px;
    }
  }
}
</style>
